<template>
	<view>
		<view class="">
			<view class="login">
				<view>
					<view class="tu" style="display: flex;">
						<u--input :placeholder="$t('ADSL.id')" type="number" v-model="ADSLID"></u--input>
						<u-button type="defalut" @click="queryID()"  size="mini" :text="$t('app.query')" color=" #1eb9ee" style="width: 30px; height: 38px;margin-left: 10px;"></u-button>
					</view>
					<view class="tu" style="margin-top: 20px;">
						<u--input :placeholder="$t('ADSL.arrears')" type="number" disabled  :value="arrears"></u--input>
					</view>
					<view class="tu" style="margin-top: 20px;">
						<u--input :placeholder="$t('ADSL.name')" type="text" disabled  :value="xingming"></u--input>
					</view>
					
					<view class="tu" style="margin-top: 20px;">
						<u--input :placeholder="$t('ADSL.pay')" type="number" v-model="jine"></u--input>
					</view>
					<u-button type="primary" :text="$t('app.qd')"  @click="jiaofei()"  color="#014099" style="margin-top: 30px;"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getResponseData, showToastTip,getBaseUrl,getWsUrl} from "@/api/req.js";
	
	export default {
		data() {
			return {
                ADSLID:'',
				arrears:'',
				xingming:'',
				jine:'',
				ADSLOrderID:''

			}
		},
		methods: {
			queryID(){
				var that = this;
				getResponseData("/adslOrder/queryUserADSL",'get',{
					adslId: this.ADSLID
				},function(res){
						if (res.code == 200) {
							that.arrears=res.data.amountOwed;
                            that.xingming = res.data.userInfo.username;
							that.ADSLOrderID=res.data.id;
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					}
					);
			},
			jiaofei(){
				var that = this;
				getResponseData("/adslOrder/renew",'get',{
					adslOrderId: this.ADSLOrderID,
					price:this.jine
				},function(res){
					console.log(res);
						// if (res.code == 200) {
						// 	that.arrears=res.data.amountOwed;
      //                       that.xingming = res.data.userInfo.username;
						// }else{
						// 	uni.showToast({
						// 		title: res.msg,
						// 		icon: 'none',
						// 		duration: 2000
						// 	})
						// }
					}
					);
			}
			

		}
	}
</script>

<style>
	.tu {
		width: 475rpx;
	}

	.login {
		margin-top: 60px;
		display: flex;
		justify-content: center;
	}
</style>